import { ChevronLeft, Heart, MessageCircle, Phone, Video, Star } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useAppSelector, useAppDispatch } from '../store/hooks';
import { removeFollowedDoctor } from '../store/doctorSlice';

interface Doctor {
  id: string;
  name: string;
  title: string;
  hospital: string;
  department: string;
  avatar: string;
  isOnline: boolean;
  consultationMethods: string[];
  specialties: string;
  rating: number;
  commendations: number;
  views: number;
  price: number;
  isGradeA?: boolean;
}

/**
 * 我的医生页面组件 - 用户关注的医生管理
 * 
 * 功能特性：
 * - 关注医生列表展示
 * - 取消关注功能
 * - 医生详情跳转
 * - 在线咨询入口
 * - 医生状态显示
 * - 空状态引导
 * 
 * 主要状态：
 * - followedDoctors: 关注医生ID列表（从Redux获取）
 * - followedDoctorsData: 关注医生完整数据（从Redux获取）
 * 
 * 医生信息展示：
 * - 医生头像和基本信息
 * - 医院和科室信息
 * - 在线状态显示
 * - 咨询方式图标
 * - 评分和推荐数
 * 
 * 操作功能：
 * - 取消关注医生
 * - 查看医生详情
 * - 开始在线咨询
 * - 返回上一页
 * 
 * 咨询方式支持：
 * - 图文咨询（MessageCircle图标）
 * - 电话咨询（Phone图标）
 * - 视频咨询（Video图标）
 * 
 * 空状态处理：
 * - 无关注医生时的引导页面
 * - 跳转到首页发现医生
 * - 友好的用户提示
 * 
 * Redux集成：
 * - 从doctorSlice获取关注医生数据
 * - 支持取消关注操作
 * - 状态同步更新
 * 
 * 页面布局：
 * - 顶部导航栏（返回按钮、标题、医生数量）
 * - 医生列表区域
 * - 空状态引导区域
 * 
 * @returns {JSX.Element} 我的医生页面组件
 */
export default function MyDoctorPage() {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const { followedDoctors, followedDoctorsData } = useAppSelector((state) => state.doctor);



  const handleBackClick = () => {
    navigate(-1);
  };

  const handleUnfollow = (doctorId: string) => {
    // 从Redux store中移除医生
    dispatch(removeFollowedDoctor(doctorId));
  };

  const handleConsult = (doctorId: string) => {
    // 直接跳转到医生详情页面，而不是咨询页面
    navigate(`/doctor/${doctorId}`);
  };

  const handleDoctorClick = (doctorId: string) => {
    navigate(`/doctor/${doctorId}`);
  };

  const getConsultationIcon = (method: string) => {
    switch (method) {
      case '图文咨询':
        return <MessageCircle className="w-4 h-4" />;
      case '电话咨询':
        return <Phone className="w-4 h-4" />;
      case '视频咨询':
        return <Video className="w-4 h-4" />;
      default:
        return <MessageCircle className="w-4 h-4" />;
    }
  };



  return (
    <div className="min-h-full bg-gray-50">
      {/* 顶部导航栏 */}
      <div className="bg-white px-4 py-6 flex items-center border-b border-gray-100">
        <button 
          onClick={handleBackClick}
          className="w-8 h-8 flex items-center justify-center mr-4"
        >
          <ChevronLeft className="w-6 h-6 text-gray-900" />
        </button>
        <h1 className="text-xl font-bold text-gray-900">我的医生</h1>
        <div className="ml-auto text-sm text-gray-500">
          {followedDoctorsData.length} 位医生
        </div>
      </div>

      {/* 页面内容 */}
      <div className="p-4">

        
        {followedDoctorsData.length === 0 ? (
          <div className="text-center py-16">
            <div className="w-24 h-24 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
              <Heart className="w-12 h-12 text-gray-400" />
            </div>
            <h3 className="text-lg font-medium text-gray-900 mb-2">还没有关注的医生</h3>
            <p className="text-gray-500 mb-6">关注您喜欢的医生，获取专业医疗建议</p>
            <button
              onClick={() => navigate('/')}
              className="px-6 py-3 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors"
            >
              去发现医生
            </button>
          </div>
        ) : (
          <div className="space-y-4">
            {followedDoctorsData.map((doctor) => (
              <div
                key={doctor.id}
                className="bg-white rounded-lg p-4 shadow-sm border border-gray-100"
              >
                <div className="flex items-start space-x-4">
                  {/* 医生头像 */}
                  <div className="relative flex-shrink-0">
                    <div className="w-16 h-16 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center shadow-md">
                      <span className="text-lg font-semibold text-white">
                        {doctor.name ? doctor.name.charAt(0) : '医'}
                      </span>
                    </div>
                    {doctor.isOnline && (
                      <div className="absolute -bottom-1 -right-1">
                        <div className="w-4 h-4 bg-green-500 rounded-full border-2 border-white shadow-sm"></div>
                      </div>
                    )}
                  </div>

                  {/* 医生信息 */}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center space-x-2 mb-2">
                      <h3 className="text-base font-semibold text-gray-900 truncate">
                        {doctor.name} {doctor.title}
                      </h3>
                      <span className="px-2 py-0.5 bg-red-100 text-red-700 text-xs rounded-full font-medium flex-shrink-0 flex items-center gap-1">
                        <Heart size={10} fill="currentColor" />
                        已关注
                      </span>
                      {doctor.isGradeA && (
                        <span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full font-medium flex-shrink-0">
                          三甲
                        </span>
                      )}
                    </div>
                    
                    <p className="text-sm text-gray-600 mb-2 truncate">
                      {doctor.hospital} {doctor.department}
                    </p>

                    {/* 咨询方式 */}
                    <div className="flex flex-wrap gap-2 mb-3">
                      {doctor.consultationMethods.map((method) => (
                        <span
                          key={method}
                          className="px-2 py-1 border border-primary-200 text-primary-600 text-xs rounded-full bg-primary-50 font-medium flex items-center gap-1"
                        >
                          {getConsultationIcon(method)}
                          {method}
                        </span>
                      ))}
                    </div>

                    {/* 擅长领域 */}
                    <div className="mb-3">
                      <p className="text-sm text-gray-700 line-clamp-2 leading-relaxed">
                        擅长：{doctor.specialties}
                      </p>
                    </div>

                    {/* 统计信息 */}
                    <div className="flex items-center space-x-4 text-xs text-gray-500 mb-4">
                      <span className="flex items-center gap-1">
                        <Star className="w-3 h-3 text-yellow-500 fill-current" />
                        好评率{doctor.rating}%
                      </span>
                      <span className="flex items-center gap-1">
                        <span className="w-2 h-2 bg-blue-400 rounded-full"></span>
                        锦旗{doctor.commendations}
                      </span>
                      <span className="flex items-center gap-1">
                        <span className="w-2 h-2 bg-purple-400 rounded-full"></span>
                        浏览{doctor.views}
                      </span>
                    </div>

                    {/* 价格和操作按钮 */}
                    <div className="flex items-center justify-between">
                      <div className="flex items-baseline gap-1">
                        <span className="text-lg font-bold text-red-500">¥{doctor.price}</span>
                        <span className="text-sm text-gray-500">/次</span>
                      </div>
                      <div className="flex space-x-2">
                        <button
                          onClick={() => handleConsult(doctor.id)}
                          className="px-4 py-2 bg-primary-500 text-white rounded-lg text-sm font-medium hover:bg-primary-600 transition-colors"
                        >
                          立即咨询
                        </button>
                        <button
                          onClick={() => handleUnfollow(doctor.id)}
                          className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"
                        >
                          取消关注
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
} 